<template>
 <div :class="widget.options.customClass || ''">
  <el-form-item :label-width="!widget.name ? '0px' : ''"
  :key="index"
  :label="index === 0 ? widget.name : ''"
  :prop="widget.model + '.' + index + ''"
  :rules="widget.rules"
  v-for="(item, index) in frmCount">
    <span class="tw-formlist-autoindex">
      {{index + 1}}
    </span>

    <template v-if="widget.childType == 'input'" >
      <el-input
        v-if="widget.options.dataType == 'number' || widget.options.dataType == 'integer' || widget.options.dataType == 'float'"
        type="number"
        v-model.number="dataModel[index]"
        :placeholder="widget.options.placeholder"
        :style="{width: widget.options.width}"
        :disabled="widget.options.disabled"
      ></el-input>
      <el-input
        v-else
        :type="widget.options.dataType"
        v-model="dataModel[index]"
        :disabled="widget.options.disabled"
        :placeholder="widget.options.placeholder"
        :style="{width: widget.options.width}"
      ></el-input>
    </template>

    <template v-if="widget.childType == 'textarea'">
      <el-input type="textarea" :rows="5"
        v-model="dataModel[index]"
        :disabled="widget.options.disabled"
        :placeholder="widget.options.placeholder"
        :style="{width: widget.options.width}"
      ></el-input>
    </template>

    <template v-if="widget.childType == 'number'">
      <el-input-number
        v-model="dataModel[index]"
        :style="{width: widget.options.width}"
        :step="widget.options.step"
        controls-position="right"
        :disabled="widget.options.disabled"
        :min="widget.options.min"
        :max="widget.options.max"
      ></el-input-number>
    </template>

    <template v-if="widget.childType == 'radio'">
      <el-radio-group v-model="dataModel[index]"
        :style="{width: widget.options.width}"
        :disabled="widget.options.disabled"
      >
        <el-radio
          :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
          :label="item.value" v-for="(item, index) in widget.options.options" :key="index"
        >
          <template>{{widget.options.showLabel ? item.label : item.value}}</template>
        </el-radio>
      </el-radio-group>
    </template>

    <template v-if="widget.childType == 'checkbox'">
      <el-checkbox-group v-model="dataModel[index]"
        :style="{width: widget.options.width}"
        :disabled="widget.options.disabled"
      >
        <el-checkbox

          :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
          :label="item.value" v-for="(item, index) in widget.options.options" :key="index"
        >
          <template>{{widget.options.showLabel ? item.label : item.value}}</template>
        </el-checkbox>
      </el-checkbox-group>
    </template>

    <template v-if="widget.childType == 'time'">
      <el-time-picker
        v-model="dataModel[index]"
        :is-range="widget.options.isRange"
        :placeholder="widget.options.placeholder"
        :start-placeholder="widget.options.startPlaceholder"
        :end-placeholder="widget.options.endPlaceholder"
        :readonly="widget.options.readonly"
        :disabled="widget.options.disabled"
        :editable="widget.options.editable"
        :clearable="widget.options.clearable"
        :arrowControl="widget.options.arrowControl"
        :value-format="widget.options.format"
        :style="{width: widget.options.width}"
      >
      </el-time-picker>
    </template>

    <template v-if="widget.childType=='date'">
      <el-date-picker
        v-model="dataModel[index]"
        :type="widget.options.type"
        :placeholder="widget.options.placeholder"
        :start-placeholder="widget.options.startPlaceholder"
        :end-placeholder="widget.options.endPlaceholder"
        :readonly="widget.options.readonly"
        :disabled="widget.options.disabled"
        :editable="widget.options.editable"
        :clearable="widget.options.clearable"
        :value-format="widget.options.timestamp ? 'timestamp' : widget.options.format"
        :format="widget.options.format"
        :style="{width: widget.options.width}"
      >
      </el-date-picker>
    </template>

    <template v-if="widget.childType =='rate'">
      <el-rate v-model="dataModel[index]"
        :max="widget.options.max"
        :disabled="widget.options.disabled"
        :allow-half="widget.options.allowHalf"
      ></el-rate>
    </template>

    <template v-if="widget.childType == 'color'">
      <el-color-picker
        v-model="dataModel[index]"
        :disabled="widget.options.disabled"
        :show-alpha="widget.options.showAlpha"
      ></el-color-picker>
    </template>

    <template v-if="widget.childType == 'select'">
      <el-select
        v-model="dataModel[index]"
        :disabled="widget.options.disabled"
        :multiple="widget.options.multiple"
        :clearable="widget.options.clearable"
        :placeholder="widget.options.placeholder"
        :style="{width: widget.options.width}"
        :filterable="widget.options.filterable"
      >
        <el-option v-for="item in widget.options.options" :key="item.value" :value="item.value" :label="widget.options.showLabel?item.label:item.value"></el-option>
      </el-select>
    </template>

    <template v-if="widget.childType=='switch'">
      <el-switch
        v-model="dataModel[index]"
        :disabled="widget.options.disabled"
      >
      </el-switch>
    </template>

    <template v-if="widget.childType=='slider'">
      <el-slider
        v-model="dataModel[index]"
        :min="widget.options.min"
        :max="widget.options.max"
        :disabled="widget.options.disabled"
        :step="widget.options.step"
        :show-input="widget.options.showInput"
        :range="widget.options.range"
        :style="{width: widget.options.width}"
      ></el-slider>
    </template>

    <template v-if="widget.childType=='imgupload'">
      <tw-upload
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :size="config.size"
        :action="config.action"
        :multiple="widget.options.multiple"
        :headers="widget.options.headers"
        :limit="widget.options.limit"
        :list-type="widget.options.listtype"
        :auto-upload="widget.options.autoupload"
        :data="widget.options.data"
        :drag="widget.options.drag"
        :accept="widget.options.accept"
        :with-credentials="config.withcredentials"
        :show-file-list="widget.options.showfilelist"
        :placeholder="widget.options.placeholder"
        :tips="widget.options.tips"
        :useCustFilelist="widget.options.useCustFilelist"
        :useCustFileicon="widget.options.useCustFileicon"
        :icons="config.icons"
        :btnType="widget.options.btnType"
        :maxsize="widget.options.maxsize"
        :closeAlert="widget.options.closeAlert"
      >
      </tw-upload>
    </template>

    <template v-if="widget.childType == 'editor'">
      <vue-editor
        v-model="dataModel[index]"
        :disabled="widget.options.disabled"
        :style="{width: widget.options.width}"
      >
      </vue-editor>
    </template>

    <template v-if="widget.childType == 'cascader'">
      <el-cascader
        v-model="dataModel[index]"
        :disabled="widget.options.disabled"
        :clearable="widget.options.clearable"
        :placeholder="widget.options.placeholder"
        :style="{width: widget.options.width}"
        :options="widget.options.options"
      >
      </el-cascader>
    </template>

    <template v-if="widget.childType == 'text'">
      <span>{{dataModel[index]}}</span>
    </template>

    <i class="el-icon-top tw-formlist-itemtop" style="margin-left:10px" @click.prevent="sortTop(dataModel, index)" :class="{disabled: index === 0 || widget.options.disabled}"></i>
    <i class="el-icon-bottom tw-formlist-itembottom" style="margin-left:10px" @click.prevent="sortDown(dataModel, index)" :class="{disabled: index === frmCount - 1 || widget.options.disabled}"></i>
    <!-- <i class="el-icon-delete tw-formlist-itemdel" style="margin-left:10px" @click.prevent="removeFormItem(widget.childType)" :class="{disabled: index < frmCount - 1 || index === 0}"></i> -->
    <i class="el-icon-delete tw-formlist-itemdel" style="margin-left:10px" @click.prevent="removeFormItem(index)" v-if="index > 0" :class="{disabled: widget.options.disabled}"></i>
    <!-- <i class="el-icon-delete tw-formlist-itemdel" style="margin-left:10px" @click.prevent="removeFormItem(widget.childType, index)" v-if="index === frmCount - 1 && frmCount > 1"></i> -->
  </el-form-item>

  <el-form-item>
    <el-button class="tw-formlist-additem"
     :size="config.size"
     :type="widget.options.btnType"
     :plain="widget.options.btnPlain"
     :disabled="widget.options.btnDisabled || frmCount >= widget.options.btnLimit || widget.options.disabled"
     @click="addFormItem(widget.childType)">
     <i class="el-icon-plus"></i> {{widget.options.btnLabel}}
    </el-button>
  </el-form-item>
  </div>
</template>

<script>
import TwUpload from './Upload'

export default {
  props: ['widget', 'models', 'rules', 'config'],
  components: {
    TwUpload
  },
  inject: ['_root'],
  computed: {
    frmCount () {
      if (this.dataModel instanceof Array) {
        return this.dataModel.length > 0 ? this.dataModel.length : 0
      } else {
        return 0
      }
    }
  },
  data () {
    return {
      dataModel: this.models[this.widget.model]
    }
  },
  created () {

  },
  methods: {
    removeFormItem (index) {
      if (this.widget.options.disabled) {
        return
      }
      window.$ui.confirm('确认删除？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.dataModel.length > 0) {
          for (let i = index; i < this.dataModel.length - 1; i++) {
            this.dataModel[i] = this.dataModel[i + 1]

            if (this.widget.hiddenmodel !== undefined && this.widget.hiddenmodel) { // 关联隐藏表单
              this.models[this.widget.hiddenmodel][i] = this.models[this.widget.hiddenmodel][i + 1]
            }
          }
          this.dataModel.pop()

          if (this.widget.hiddenmodel !== undefined && this.widget.hiddenmodel) { // 关联隐藏表单
            this.models[this.widget.hiddenmodel].pop()
          }
        }
        window.$ui.msg.success("删除成功")
      })
    },
    addFormItem (childType) {
      if (this.widget.options.disabled) {
        return
      }
      if (['cascader', 'imgupload', 'checkbox'].includes(childType)) {
        this.dataModel.push([])

        if (this.widget.hiddenmodel !== undefined && this.widget.hiddenmodel) { // 关联隐藏表单
          this.models[this.widget.hiddenmodel].push([])
        }
      } else {
        this.dataModel.push('')

        if (this.widget.hiddenmodel !== undefined && this.widget.hiddenmodel) { // 关联隐藏表单
          this.models[this.widget.hiddenmodel].push('')
        }
      }
    },
    sortTop (data, idx) {
      if (this.widget.options.disabled) {
        return
      }
      let tmp = data[idx]
      data[idx] = data[idx - 1]
      data[idx - 1] = tmp

      if (this.widget.hiddenmodel !== undefined && this.widget.hiddenmodel) { // 关联隐藏表单
        let temp = this.models[this.widget.hiddenmodel][idx]
        this.models[this.widget.hiddenmodel][idx] = this.models[this.widget.hiddenmodel][idx - 1]
        this.models[this.widget.hiddenmodel][idx - 1] = temp
      }
      this.updateModel(data)
      this.$forceUpdate()
    },
    sortDown (data, idx) {
      if (this.widget.options.disabled) {
        return
      }
      let tmp = data[idx]
      data[idx] = data[idx + 1]
      data[idx + 1] = tmp

      if (this.widget.hiddenmodel !== undefined && this.widget.hiddenmodel) { // 关联隐藏表单
        let temp = this.models[this.widget.hiddenmodel][idx]
        this.models[this.widget.hiddenmodel][idx] = this.models[this.widget.hiddenmodel][idx + 1]
        this.models[this.widget.hiddenmodel][idx + 1] = temp
      }
      this.updateModel(data)
      this.$forceUpdate()
    },
    updateModel (val) {
      this.models[this.widget.model] = val
      this.$emit('update:models', {
        ...this.models,
        [this.widget.model]: val
      })
      this.$emit('input-change', val, this.widget.model)
    }
  },
  watch: {
    dataModel: {
      deep: true,
      handler (val) {
        this.updateModel(val)
      }
    },
    models: {
      deep: true,
      handler (val) {
        this.dataModel = val[this.widget.model]
      }
    }
  }
}
</script>
